<template>
  <div class="container">
    <!--搜索-->
    <search-com
      id="searchBox"
      ref="searchBox"
      :showMoreSearch="showMoreSearch"
      :searchData="searchData"
      :queryParam="queryParam"
      @switchShowMoreSearchState="switchShowMoreSearchState"
    >
      <div slot="btn">
        <!--操作按钮-->
        <el-button type="success" size="mini" @click="add">增</el-button>
        <el-button type="danger" size="mini" @click="removeFunc">删</el-button>
        <el-button type="warning" size="mini" @click="update">改</el-button>
        <el-button type="primary" size="mini" @click="loadData">查</el-button>
      </div>
    </search-com>
    <!--表格-->
    <pltable-com
      v-if="tableHeight"
      :tableHeight="tableHeight"
      :loading="loading"
      :columnData="columnData"
      :dataSource="dataSource"
    >
      <template v-slot:data="slotProps">
        <div>{{ slotProps.scope.row[slotProps.item.prop] }}</div>
      </template>
    </pltable-com>
    <!--分页-->
    <pagination
      :ipagination="ipagination"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></pagination>
  </div>
</template>
<script>
import searchCom from '@/components/czyCom/SearchCom'
import pltableCom from '@/components/czyCom/pltableCom'
import pagination from '@/components/czyCom/paginationCom'
export default {
  mixins: [JeecgListMixin],
  components: { searchCom, pltableCom, pagination },
  data() {
    return {
      tableHeight: null,
      // 搜索
      searchData: [
        {
          label: '单行文本109',
          type: 'input',
          modelName: 'field109',
          placeholder: '请输入单行文本109',
        },
        {
          label: '单行文本110',
          type: 'input',
          modelName: 'field110',
          placeholder: '请输入单行文本110',
        },
        {
          label: '单行文本111',
          type: 'input',
          modelName: 'field111',
          placeholder: '请输入单行文本111',
        },
      ],
      // 表格行标题
      columnData: [
        {
          label: '序号',
          width: '70',
        },
        {
          label: 'task110',
          prop: 'col_110',
        },
        {
          label: 'task111',
          prop: 'col_111',
        },
        {
          label: 'task101',
          prop: 'col_101',
        },
      ],
      url: {
        list: ``,
        selectData: ``,
      },
    }
  },
  methods: {
    add() {
      console.log('add func')
    },
    removeFunc() {
      console.log('removeFunc func')
    },
    update() {
      console.log('update func')
    },
    loadData() {
      console.log('loadData func')
    },
  },
}
</script>
<style scoped></style>
